{% extends "jb_admin/base.html" %}
{% load static %}
{% load jsonify %}

{% block page_content %}

<script type="text/javascript">

    extra_table_logic='{{ extra_table_logic }}'
    footer={{ footer |jsonify }}
    search_args={{ search_args | jsonify | default:'{}'  }}
    parents = {{ parents | jsonify | default:'[]' }}
    advise_heads = {{ advise_heads | jsonify | default:'[]' }}
    advise_heads_cookie_path= '{{ advise_heads_cookie_path }}' || null

    option= {{ option | jsonify }}
    table_layout={{ table_layout | jsonify }}
    selectable = {{ selectable | jsonify }}
    // 这个变量留着，兼容老的调用。。准备把它移除
//    tabs={{ tabs | jsonify | default:'[]' }}
//    named_tabs={{ named_tabs | jsonify | default:'{}' }}
    event_slots = {{ event_slots | jsonify | default:'[]' }}

    childStore_event_slot={{ childStore_event_slot | jsonify |default:'{}' }}

    //    eventBus = new Vue({})


    var base_table_store = {
        data:function(){
            return {
                selectable:selectable,
                parents:parents,
                page_label:page_label,
                heads:heads,
                rows:rows,
                row_filters:row_filters,
                row_sort:row_sort,
                row_pages:row_pages,
                director_name:director_name,
                footer:footer,
                ops:ops,
                search_args:search_args,
                //---------table_page---------
                tab_stack:[],
//                tabs:tabs,
//                named_tabs:named_tabs,
                //-------------------
                named_ctx:named_ctx,
                event_slots:event_slots,
                advise_heads:advise_heads,
                advise_heads_cookie_path:advise_heads_cookie_path,
                option:option,
                table_layout:table_layout,
            }
        },
        mixins:[table_store,table_page_store],

    }

    {% block custom-store %}

    real_table_store = base_table_store

    {% endblock %}


    table_logic={
        el:'#there',
        created:function(){

//            this.childStore=new Vue(real_table_store)
        },
        data:{
            childStore : new Vue(real_table_store),

            parents:parents,
            page_label:page_label,
            tr:cfg.tr


        },
        mixins:[mix_table_data,mix_ele_table_adapter],

        mounted:function(){
            var self=this
            this.childStore.vc=this
            ex.assign(this.op_funs,{
                row_changed:function(kws){
                    var row= kws.row
                    if(!ex.isin(row,self.changed_rows)){
                        self.changed_rows.push(row)
                    }
                },
                row_changed_undo_act:function(kws){
                    var md5= ex.hashDict(kws.row)
                    if(md5 == kws.row._hash){
                        ex.remove(self.changed_rows,{pk:kws.row.pk})
                    }
                },
                switch_to_tab:function(kws){

                    if(kws.named_tabs){
                        // 传入named_tabs，造成tabs的切换
                        var next_tabs = self.named_tabs[kws.named_tabs]
                    }else {
                        var next_tabs = self.tabs
                    }
                    self.tab_stack.push( {
                        widget:'com-widget-el-tab' ,
                        tabs:next_tabs,
                        crt_tab_name:kws.tab_name,
                        par_row:kws.row,

                    })
                    self.crt_row= kws.row
                },
                update_or_insert:function(kws){
//                    var new_row = kws.new_row
//                    var old_row= kws.old_row
//                    self.update_or_insert(new_row,old_row)
                    self.childStore.update_or_insert(kws.new_row)
                    self.crt_row=kws.new_row
                },
                get_childs:function(kws){
                    // head:{fun:
                    var value =kws.row[kws.head.field]
                    self.search_args._par=value
                    self.search()
                }

            })

//            eventBus.$on('switch_to_tab',this.op_funs.switch_to_tab)

            self.$on('operation',self.on_operation)
        },
        computed:{
            pathable_tab_names:function(){
                var names =[]
                var last_stack=null
                ex.each(this.childStore.tab_stack,function(stack){
                    if(stack){
                        var last_crt_tab = ex.findone(stack.tabs,{name:stack.crt_tab_name})
//                        names.push(last_crt_tab.label)
                        if(stack.par_row._label){
                            names.push(last_crt_tab.label+"("+stack.par_row._label+")")
                        }else{
                            names.push(last_crt_tab.label)
                        }
                    }
//                    last_stack = stack
                })
                return names

            },

        },
        methods:{

//            on_td_event:function(e){
//                this.op_funs[e.name](e)
//            },
            on_tab_event:function(e){
                this.op_funs[e.name](e)
            },
//            on_select_group_change:function(sel,v){
//                this.selected= sel
//            },
            pop_tab_stack:function(){

                if( this.tab_stack.length != 0){
                    this.tab_stack.pop()
                }
//                if(this.tab_stack.length==0){
//                    this.tabgroup.crt='_main'
//                    this.tabgroup.crt_tabs=[]
//                }
                var self=this
                Vue.nextTick(function(){
                    self.$refs.e_table.doLayout()
                })

            },

//            show_tab:function(name){
//                this.tabgroup.crt = name
//                var self =this
//                Vue.nextTick(function(){
//                    self.$refs['_tab_'+name][0].on_show()
//                })
//            },
//            handleClick(tab, event) {
//                this.show_tab(tab.name)
//            },
            get_childs:function(par){
                this.search_args._par=par.value
                this.search()
            },


            get_tab_name:function(tabs){
                if(tabs==this.tabs){
                    return ''
                }else{
                    for(var k in this.named_tabs){
                        var tmp_tabs = this.named_tabs[k]
                        if(tmp_tabs == tabs){
                            return k
                        }
                    }
                    return 'No Name Found'
                }
            }

        }

    }

    function update_cnt_size(){
//        var cnt_ht =  Math.max( $(document).height(),window.innerHeight)
        var cnt_ht =  window.innerHeight ;//$('body').height() ;//
        $('#there').height(cnt_ht -80)
    }
    $(function () {
        update_cnt_size()

        $(window).resize(function(){
            update_cnt_size()
        });

        if(extra_table_logic){
            table_logic.mixins.push(window[extra_table_logic])
        }
//        setTimeout(()=>{
            table=new Vue(table_logic)
//        },1000)


    })

</script>

{% block extra_head %}
{% endblock %}
<style>
    a[disabled] {
        color: gray;
        pointer-events: none;
    }
    .table th .cell{
        white-space:nowrap;
    }
    .el-table .has-gutter th>.cell{
        width: auto;
    }
</style>
<div id='there' class="flex-v">

    {% block flag %}
    <div v-if="page_label" style="border-left: 3px solid #3e8ebd;padding-left: 1em;margin-bottom: 5px;">
        <b v-text="page_label"></b>
        <span style="display: inline-block;width: 2em;"></span>
        <ol class="breadcrumb" style="display: inline-block;background-color: inherit;margin-bottom: 0;padding: 0"  v-show="pathable_tab_names.length >0 ">
            <li v-for="name in pathable_tab_names"><span v-text="name"></span></li>
        </ol>
        <button type="button"
                class="btn btn-warning btn-xs"
                v-show="childStore.tab_stack.length > 0"
                @click="childStore.pop_tab_stack()">
            <i class="fa fa-arrow-circle-o-left fa-lg"></i><span v-text="tr.back"></span></button>
    </div>


    {% endblock %}

    {% block tab-content %}
    <div id="main-page" class="rows-block flex-v flex-grow" v-show="childStore.tab_stack.length == 0">


        <div v-if="childStore.row_filters.length > 0"
             style="background-color: #fbfbf8;padding: 2px 1em;border-radius: 4px;">
            <!--<com-filter class="flex" :heads="row_filters" :search_args="search_args"-->
            <!--@submit="search()"></com-filter>-->
            <com-table-filters></com-table-filters>

        </div>
        <div  v-if="childStore.ops.length>0 && childStore.tab_stack.length ==0">
            <com-table-operations></com-table-operations>
        </div>

        <div v-if="childStore.parents.length>0">
            <com-table-parents></com-table-parents>
        </div>

        <!--<ol v-if="childStore.parents.length>0" class="breadcrumb jb-table-parent">-->
        <!--<li v-for="par in childStore.parents"><a href="#" @click="get_childs(par)"  v-text="par.label"></a></li>-->
        <!--</ol>-->

        <div class="box box-success flex-v flex-grow" style="margin-bottom: 0">
            <div class="table-wraper flex-grow" style="position: relative;">
                {% block table_content %}
                <com-table-rows></com-table-rows>
            </div>

            {% endblock %}
        </div>
        <div style="background-color: white;">
            <com-table-pagination></com-table-pagination>
        </div>
    </div>

    <div id="tab-wrap"  v-if="childStore.tab_stack.length>0" class="flex-grow" style="position: relative">

        <com-widget-stack :ctx_list="childStore.tab_stack" @win-event="on_tab_event($event)"></com-widget-stack>


    </div>

    {% endblock %}

</div>
<style>
    .main-tab-content{

    }


    .fake-suit th{
        white-space: nowrap;
    }

</style>
{% block extra %}
{% endblock %}
{% endblock %}